<template>
  <div v-if="shoppingList.recipe.major.length > 0" class="shoppingList1">
    <div
      class="top"
      :style="{ backgroundImage: `url(${shoppingList.recipe.thumb_path})` }"
      @click="toCookbook"
    >
      {{ shoppingList.recipe.title }}
    </div>
    <div class="lists">
      <ShoppingListItem
        v-for="(m, index) in shoppingList.recipe.major"
        :key="index"
        :m="m"
        :index="index"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import ShoppingListItem from "@/components/ShoppingListItem.vue";
import router from "@/router";
import axios from "axios";
import { onMounted, ref } from "vue";

const props = defineProps(["item"]);

const shoppingList = ref({
  recipe: {
    major: [
      {
        title: "",
        note: "",
      },
    ],
    photo_path: "",
    title: "",
  },
});

onMounted(async () => {
  // console.log(props.item);

  let res = await axios.get(
    `https://apis.netstart.cn/douguo/recipe/detail/${props.item}`
  );
  // console.log(res.data.result);
  shoppingList.value = res.data.result;
});

const toCookbook = () => {
  // console.log("toCookbook");
  router.push({
    name: "cookbook",
    query: { id: props.item, user_id: shoppingList.value.recipe.user.user_id },
  });
};
</script>

<style lang="scss" scoped>
.shoppingList1 {
  margin-bottom: 25px;
  padding: 0 16px;

  .top {
    width: 100%;
    height: 100px;
    border-radius: 5px 5px 0 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    font-size: 18px;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}
</style>
